<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.9/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body>
    <div id="app">
        <!-- 必须等待用户操作停止后一段事件，才执行正式的操作 -->
        <!-- 不让用户频繁的发送请求 -->
        <input @keyup.13="search" type="text" v-model="text">
        <button @click="search">百度一下</button>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                text: "",
                timer: null
            },
            methods: {
                search() {
                    // 如果timer不为null 就清除定时器
                    // 第一次输入会触发search函数，进行倒计时1s后执行定时器里的函数，如果用户再次进行了点击，就会被if判断为已经有定时器了，就会清除掉上次的定时器，重新执行定时器
                    if (this.timer != null) {
                        clearTimeout(this.timer)
                    }
                    this.timer = setTimeout(() => {
                        // 发送请求
                        console.log(`百度一下${this.text}`)
                    }, 1000)
                }
            }, watch: {
                // 每次输入都进行请求
                text() {
                    this.search()
                }
            }
        })
    </script>
</body>

</html>
<!-- 原生js防抖 -->
<!--
<input type="text" class="search_input">
    <button id="btn">search</button>
    <script>
        let btn = document.getElementById("btn");
        let input = document.querySelector(".search_input");
        let timer = null;
        btn.onclick = function () {
            if (timer != null) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                console.log(input.value, '搜索中');
            }, 1000)

        }
    </script>
-->